<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天猫页面(鞋)</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script><!-- 阿里手机端和平板端的弹性布局库不同 -->
    <!-- <style>
        *{
            margin: 0;
            padding: 0;
        }        
        .row{
            display: flex;
        }
        .col{
            
            background-color: rgb(216, 51, 51);
        }
        .col:first-child{
            
            background-color: green;
        }
        .col-1{width: 1rem;}
        .col-2{width: 2rem;}
        .col-3{width: 3rem;}
        .col-4{width: 4rem;}
        .col-5{width: 5rem;}
        .col-6{width: 6rem;}
        .col-7{width: 7rem;}
        .col-8{width: 8rem;}
        .col-9{width: 9rem;}

        


    </style> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul,li{
            list-style: none;
        }
        body{
            --tm-PRICE-TEXT-COLOR:#ee0a3b;/*变量*/
        }
        .page__hd{
            width: 10rem;
        }
        .page__hd img{
            max-width: 100%;
        }
        ul.goods{
            padding: 0.1333rem;
        }
        .goods__item{
            position: table;
        }
        .goods__item > .goods__figure,  
        .goods__item > .goods__figcaption {
            display: table-cell;/*?*/
            padding: 0.16rem 0;
            vertical-align: top;/*垂直对齐方式*/
            background-color: rgb(255, 255, 255);
        }
        .goods__figure {
            width: 2.4rem;
            height: 2.4rem;
        }
        .goods__figure > img {
            max-width: 100%;
        }
        .goods__item .goods__figcaption {
            width: 7.2rem;
            padding-left: 0.2rem;
            padding-right: 0.2rem;
            position: relative;
        }
        .goods__figcaption .goods__title a {
            color: #333;
            line-height: 1.25;
        }
        .goods__figcaption .goods__price {
            padding: 0.15rem 0 0.2rem;
        }


        .goods__figcaption .goods__price span{
            font-size: 11px;
            display: inline-block;/*为什么span要改成行内块级？*/
            background-color: var(--tm-PRICE-TEXT-COLOR);
            vertical-align:middle;
            border-radius:.026667rem;
            padding:.026667rem .08rem .013333rem;/*顺时钟 上、右、下*/
            color: rgb(255, 255, 255);
            font-weight: 700;
            margin-right: 0.0667rem;

        }
        .goods__figcaption .goods__price strong{
            display: inline-block;
            vertical-align: middle;
            font-weight: 700;
            color: var(--tm-PRICE-TEXT-COLOR);
            font-size: 16px;
            margin-right: 0.16rem;

        }
        .goods__figcaption .goods__price small{
            display: inline-block;
            vertical-align: middle;
            font-weight: 700;
            color: var(--tm-PRICE-TEXT-COLOR);
            font-size: 12px;

        }
        .goods__type{
            color:#ff3600;
        }
        .goods__btn{
            
            
            width: 2.1333rem;
            height: 0.64rem;
            border-radius: 0.0267rem;

            background-color: var(--tm-PRICE-TEXT-COLOR);
            text-align: center;
            font-size: 14px;/*字体默认16px*/
            font-weight: 700;
            color:rgb(255, 255, 255);
            
            position: absolute;
            bottom: 0.1333rem;
            right: 0.2rem;
            
        }


    </style>
</head>
<body>
    <!-- <div class="row">
        <div class="col col-2">1</div>
        <div class="col col-8">2</div>
        
    </div>
    <div class="row">
        <div class="col col-4">1</div>
        <div class="col col-6">2</div>
    </div> -->
    <div class="page">
        <div class="page__hd">
            <h2><!--提升里面元素的重要性，搜索引擎会认为里面的内容更重要-->
                <img src="http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg" alt="">
            </h2>
        </div>
        <div class="page__bd">
            <ul class="goods">
                <li class="goods__item">
                    <a href="https://detail.tmall.com/item.htm?id=584587793130&ali_refid=a3_430673_1006:1109931559:N:1yRXnvJdnKrgrFou2k7QSQ==:a53cabe7a3a36e6d233342341c5441ba&ali_trackid=1_a53cabe7a3a36e6d233342341c5441ba&spm=a2e0b.20350158.31919782.3" class="goods__figure">
                        <img src="https://placeimg.com/350/350/people/grayscale" alt="">
                    </a>
                    <div class="goods__figcaption">
                        <div class="goods__title">
                            <a href="">拖鞋男夏天家用男士夏季室内家居浴室洗澡防滑软底防臭凉拖鞋女士</a>
                        </div>
                        <div class="goods__price">
                            <span>双11价</span>
                            <strong>299.0</strong>
                            <small>满400减100</small>
                        </div>
                        <div class="goods__type">
                            1小时内热卖4999件
                        </div>
                        <a href="" class="goods__btn">马上抢</a>
                    </div>
                </li>

                
            </ul>
        </div>
    </div>
    <script>
        debugger;
        const goods = [{
            'id':'584587793130',
            'pic':'https://img.alicdn.com/bao/uploaded/i1/2102608800/O1CN01xMkFe72EsS2P3O9BA_!!0-item_pic.jpg_240x240.jpgttps://img.alicdn.com/bao/uploaded/i1/2102608800/O1CN01xMkFe72EsS2P3O9BA_!!0-item_pic.jpg_240x240.jpghttps://h5.m.taobao.com/awp/core/detail.htm?id=602859285711&scm=1007.12144.135827.1720401_0_0&pvid=ff70b1c5-609e-4beb-a601-42c6fcf7a1e5&utparam=%7B%22x_hestia_source%22%3A%221720401%22%2C%22x_object_type%22%3A%22item%22%2C%22x_hestia_subsource%22%3A%22default%22%2C%22x_mt%22%3A8%2C%22x_src%22%3A%221720401%22%2C%22x_pos%22%3A12%2C%22wh_pid%22%3A-1%2C%22x_pvid%22%3A%22ff70b1c5-609e-4beb-a601-42c6fcf7a1e5%22%2C%22scm%22%3A%221007.12144.135827.1720401_0_0%22%2C%22x_object_id%22%3A602859285711%7D&spm=a211ue.11501597.new-recommend.12',
            'title':'拖鞋男夏天家用男士夏季室内家居浴室洗澡防滑软底防臭凉拖鞋女士',
            'price':'24.8',
            'count':'40000'
        },
        {  
        "id":"15068433976",
        "pic":"https://img.alicdn.com/imgextra/i1/2978259752/O1CN01frCJ8I2LuT7n2Daf1_!!2978259752-0-picasso.jpg_430x430q90.jpg",
        "title":"Toread探路者男外套2021秋季新款保暖夹克休闲运动服宽松透气男装",
        "price":"266",
        "count":"256"
        },
        {
            "id":"629361117607",
            "pic":"https://img.alicdn.com/imgextra/i4/2432508853/O1CN01koelto2FGj1e1a5jG_!!0-item_pic.jpg_430x430q90.jpg",
            "title": "凯迪拉克 XT6",
            "price":"5000",
            "count":"28"
        },
        {  
        "id":"15068433976",
        "pic":"https://img.alicdn.com/imgextra/i1/2978259752/O1CN01frCJ8I2LuT7n2Daf1_!!2978259752-0-picasso.jpg_430x430q90.jpg",
        "title":"Toread探路者男外套2021秋季新款保暖夹克休闲运动服宽松透气男装",
        "price":"266",
        "count":"256"
        }


    ]
    debugger;

    const goodsEle = document.querySelector('.goods');
    debugger;

    for(let i = 0;i<goods.length;i++){
        let item = goods[i];
        goodsEle.innerHTML += `
        <li class="goods__item">
                    <a href="https://detail.tmall.com/item.htm?id=584587793130&ali_refid=a3_430673_1006:1109931559:N:1yRXnvJdnKrgrFou2k7QSQ==:a53cabe7a3a36e6d233342341c5441ba&ali_trackid=1_a53cabe7a3a36e6d233342341c5441ba&spm=a2e0b.20350158.31919782.3" class="goods__figure">
                        <img src="${item.pic}" alt="">
                    </a>
                    <div class="goods__figcaption">
                        <div class="goods__title">
                            <a href="">${item.title}</a>
                        </div>
                        <div class="goods__price">
                            <span>双11价</span>
                            <strong>${item.price}</strong>
                            <small>满400减100</small>
                        </div>
                        <div class="goods__type">
                            1小时内热卖${item.count}件
                        </div>
                        <a href="" class="goods__btn">马上抢</a>
                    </div>
                </li>
        
        `
    }
    </script>

</body>
</html>